<template>
	<div class="module-materia-icon" @touchstart="down" @touchend="end">
		<movable-area class="materia-area" :class="{ 'maxWidth' : isTouch}">
			<movable-view class="materia-ico" :style="{top: `${sub.y}px`, left: `${sub.x}px`}" :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
		</movable-area>
	</div>
</template>

<script>
export default {
	name: 'materia-icon',
	data() {
		return {
			isTouch: false,
			x: 20,
			y: 400,
			sub: {
				x: 20,
				y: 400
			},
			touchData: {}
		}
	},
	methods: {
		onChange: function(e) {
			console.log('x', e.detail.x, 'y', e.detail.y)
			this.touchData = e.detail
		},
		down() {
			this.isTouch = true
			this.sub.y = 0
		},
		end() {
			this.x = this.x + this.touchData.x
			this.y = this.y + this.touchData.y
			this.sub.y = this.y
			this.isTouch = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.module-materia-icon {
		position: fixed;
		// top: 50px;
		// z-index: 0;
		// // border-radius: 50%;
		// left: 0.5rem;
		// bottom: 200px;
		// overflow: hidden;
		// background-color: green;
		.materia-area {
			position: fixed;
            top: 50px;
            left: 0;
			// width: 100%;
			// height: 100%;
			&.maxWidth {
				width: 100vh;
				height: 100vh;
			}
		}
		.materia-ico {
			position: fixed;
            top: 50px;
			width: 100px;
			height: 100px;
			background-color: red;
		}
	}
</style>
